<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    /* 
    Promise是异步编程的新方案
    可以通过其.then的链式调用来解决回调地狱问题
    Promise(执行器函数)
    Promise的三个状态
      pending
      fulfilled
      rejected
    状态只能改变一次
      要么是pending ==> fulfilled, 要么是pending ==> rejected
    then返回的promise的结果状态如何判断?
      简洁表达: 由then指定回调函数的执行结果
      详细表达: 4种情况
        情况1: 抛出错误  ==> 失败, reason为抛出的错误
        情况2: 返回一个失败的promise  ==> 失败, reason为就失败的promise的reason
        情况3: 返回一个成功的promise  ==> 成功, vlaue为就成功的promise的value
        情况4: 返回非promise对象值
    Promise.all(promises): 只有所有的都成功了才成功, 成功的value为所有成功promise的value组成的数组
      只要有一个失败的, 直接失败, reason为失败promise的reason
    */
    const p = new Promise((resolve, reject) => { // 执行器函数
      console.log('executor')
      // 启动异步任务
      // setTimeout(() => {
      //   const isSuccess = Date.now() %2 === 1
      //   // 如果成功了, 调用resolve
      //   if (isSuccess) {
      //     resolve('成功的结果数据')   // value
      //   } else {  // 如果失败了, 调用reject
      //     reject('失败的原因数据')   // reason
      //   }
       
      // }, 1000)
      // resolve(1)
      reject(2)
    })
    console.log('new Promise')
    console.log(p)
    p.then(
      value => {
        console.log('onResolved', value)
      },
      reason => {
        console.log('onRejected', reason)
        /* 情况1: 抛出错误  ==> 失败, reason为抛出的错误 */
        // throw 3
        /* 情况2: 返回一个失败的promise  ==> 失败, reason为就失败的promise的reason */
        // return Promise.reject(4)
        // 情况3: 返回一个成功的promise  ==> 成功, vlaue为就成功的promise的value
        // return Promise.resolve(5)
        /* 情况4: 返回非promise对象值 */
        // return undefined
        // return {}
        // Promise.reject(4)
      }
    ).then(
      value => {
        console.log('onResolved2', value)
      },
      reason => {
        console.log('onRejected2', reason)
        // throw 6
      }
    ).catch(reason => { // .then(value => value, onRejected)
      console.log('catch onRejected3', reason)
    }).then(   
      value => {
        console.log('onResolved4', value)
      },
      reason => {
        console.log('onRejected4', reason)
      }
    )

    // div.onclick = function (params) {
      
    // }
  </script>
</body>
</html>